<template>
	<view class="goods-item">
		<view class="title">{{title}}</view>
		<view class="list">
			<view v-for="(item, index) in daliyList" :key='item.id' class="item" @click="lookDetail">
				<image :src="item.cover" mode="aspectFill"></image>
				<view class="cont">
					<view class='subtitle'>{{ item.title }}</view>
					<view class='num'>{{ item.buyNumber || '0' }}人已购买</view>
					<view class='price'>¥ {{ item.price }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
	  title: String,
	  daliyList: {
	    type: Array,
	    default: []
	  },
	})
	function lookDetail() {

	}
</script>

<style lang="scss" scoped>
	.goods-item{
		.title{
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 36rpx;
			position: relative;
			&::after{
				content: "";
				position: absolute;
				left: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 249rpx;
				height: 1rpx;
				background-color: #DEDEDE;
			}
			&::before{
				content: "";
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 249rpx;
				height: 1rpx;
				background-color: #DEDEDE;
			}
		}
		.list {
			display: flex;
			gap: 34rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				width: 321rpx;
				background: #fff;
				overflow: hidden;
				border-radius: 22rpx;
		
				image {
					width: 100%;
					height: 321rpx;
				}
		
				.cont {
		
					padding: 24rpx;
				}
		
				.subtitle {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
					margin-top: 8rpx;
				}
		
				.num {
					font-weight: 500;
					font-size: 20rpx;
					color: #58DBCF;
					line-height: 23rpx;
					margin-top: 8rpx;
				}
		
				.price {
					font-weight: 800;
					font-size: 30rpx;
					color: #FF0000;
					line-height: 35rpx;
					margin-top: 20rpx;
					margin-bottom: 4rpx;
				}
			}
		}
	}

</style>